.demopinput{
  width: 400px;
  height: 500px;
  margin: 0 auto;
  background-color: #eee;
  .headinput{
    width: 350px;
    margin: 0 auto;
    border-top: 1px solid #eee;
    span{
      margin-right: 10px;
    }
    .activity{
      margin-bottom: 10px;
      margin-top: 10px;
      .activityinput{
        width: 250px;
        height: 30px;
      }
    }
    .city{
      margin-bottom: 10px;
      margin-left: 32px;
      select{
        width: 200px;
        height: 30px;
      }
    }
    .date{
      margin-left: 32px;
      margin-bottom: 10px;
      .dates{
        width: 120px;
      }
      .time{
        width: 120px;
      }
    }
  }
  .work{
    width: 350px;
    margin: 0 auto;
    span{
      margin-right: 10px;
    }
    input{
      width: 250px;
      height: 30px;
    }
    .phone{
      margin-bottom: 10px;
    }
    .switchCom{
      margin-bottom: 10px;
      .switch-button{
        display: none;/*隐藏表单元素*/
    }
    .switch-button+label{/*+选择器选择紧跟“+”左边选择器的第一个元素*/
        display: inline-block;
        position: relative;
        transition: all .3s;
        width: 60px;
        height: 30px;
        border: 1px solid #999;
        border-radius: 15px;
        background-color: #ccc;
    }
    .switch-button:checked+label{/*选中表单后的样式，:checked表示checkbox被选中后的状态*/
        background-color: lightgreen;
    }
    .switch-button+label::before{/*使用伪元素生成一个按钮*/
        content: '';
        display: block;
        height: 25px;
        width: 25px;
        position: absolute;
        border-radius: 25px;
        left: 2px;
        top: 2px;
        background-color: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
        transition: all .3s;
    }
    .switch-button:checked+label::before{/*checkbox选中时按钮的样式*/
        left: 32px;
        transition:  all .2s linear;
    }
    }
    .occupation{
      margin-bottom: 10px;
    }
  }
  .buttonCom{
    width: 350px;
    margin: 0 auto;
    span{
      margin-right: 10px;
    }
    .activitycheckbox{
      margin-bottom: 10px;
    }
    .activityradio{
      margin-bottom: 10px;
    }
  }
  .bottomCom{
    width: 350px;
    margin: 0 auto;
    span{
      margin-right: 10px;
    }
    .textCom{
      margin-bottom: 10px;
      margin-left: 32px;
    }
    .buttons{
      margin-left: 75px;
      .submit{
        width: 60px;
        height: 30px;
        margin-right: 10px;
        background-color: aqua;
        color: #fff;
        border: none;
      }
      .reset{
        width: 60px;
        height: 30px;
      }
    }
  }
}